The HTML DOM API

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die HTML DOM API besteht aus den Schnittstellen, die die Funktionalität jedes Elements in HTML definieren, sowie aus unterstützenden Typen und Schnittstellen, auf die sie sich verlassen.

Die funktionalen Bereiche, die in der HTML DOM API enthalten sind, umfassen:

  • Zugriff und Kontrolle von HTML-Elementen über das DOM.
  • Zugriff auf und Manipulation von Formulardaten.
  • Interaktion mit den Inhalten von 2D-Bildern und dem Kontext eines HTML-<canvas>, zum Beispiel um darauf zu zeichnen.
  • Verwaltung von Medien, die mit den HTML-Medienelementen (<audio> und <video>) verbunden sind.
  • Ziehen und Ablegen von Inhalten auf Webseiten.
  • Zugang zur Browser-Navigation.
  • Unterstützende und verbindende Schnittstellen für andere APIs wie Web Components, Web Storage, Web Workers, WebSocket und Server-sent events.

HTML DOM-Konzepte und -Nutzung

In diesem Artikel konzentrieren wir uns auf die Teile des HTML DOM, die die Interaktion mit HTML-Elementen betreffen. Diskussionen über andere Bereiche, wie Drag and Drop, WebSockets, Web Storage usw., finden Sie in der Dokumentation dieser APIs.

Struktur eines HTML-Dokuments

Das Document Object Model (DOM) ist eine Architektur, die die Struktur eines Dokuments beschreibt; jedes Dokument wird durch eine Instanz der Schnittstelle Document repräsentiert. Ein Dokument besteht wiederum aus einem hierarchischen Baum von Knoten, wobei ein Knoten einen grundlegenden Datensatz darstellt, der ein einzelnes Objekt innerhalb des Dokuments repräsentiert (wie ein Element oder Textknoten).

Knoten können strikt organisatorisch sein und eine Möglichkeit bieten, andere Knoten zu gruppieren oder einen Punkt zu schaffen, an dem eine Hierarchie aufgebaut werden kann; andere Knoten können sichtbare Komponenten eines Dokuments darstellen. Jeder Knoten basiert auf der Node-Schnittstelle, die Eigenschaften bietet, um Informationen über den Knoten zu erhalten, sowie Methoden zum Erstellen, Löschen und Organisieren von Knoten innerhalb des DOM.

Knoten haben keine Vorstellung davon, den Inhalt einzuschließen, der tatsächlich im Dokument angezeigt wird. Sie sind leere Gefäße. Die grundlegende Vorstellung eines Knotens, der visuellen Inhalt darstellen kann, wird durch die Element-Schnittstelle eingeführt. Eine Element-Objektinstanz repräsentiert ein einzelnes Element in einem Dokument, das entweder mit HTML oder einem XML-Vokabular wie SVG erstellt wurde.

Betrachten Sie zum Beispiel ein Dokument mit zwei Elementen, von denen eines zwei weitere eingebettete Elemente enthält:

Struktur eines Dokuments mit Elementen in einem Dokument in einem Fenster

Während die Document-Schnittstelle als Teil der DOM-Spezifikation definiert ist, erweitert die HTML-Spezifikation sie erheblich, um Informationen hinzuzufügen, die spezifisch sind für die Verwendung des DOM im Kontext eines Webbrowsers, sowie um damit HTML-Dokumente zu repräsentieren.

Unter den Dingen, die durch den HTML-Standard zu Document hinzugefügt werden, sind:

  • Unterstützung für den Zugriff auf verschiedene Informationen, die durch die HTTP-Header beim Laden der Seite bereitgestellt werden, wie der Standort, von dem das Dokument geladen wurde, Cookies, Änderungsdatum, verweisende Seite und so weiter.
  • Zugriff auf Listen von Elementen im <head>-Block und body des Dokuments sowie auf Listen der Bilder, Links, Skripte usw., die im Dokument enthalten sind.
  • Unterstützung für die Interaktion mit dem Benutzer durch Untersuchen des Fokus und durch das Ausführen von Befehlen auf bearbeitbaren Inhalten.
  • Ereignis-Handler für Dokumentereignisse, die durch den HTML-Standard definiert sind, um Zugriff auf Maus- und Tastaturereignisse, Drag and Drop, Mediensteuerung und mehr zu ermöglichen.
  • Ereignis-Handler für Ereignisse, die sowohl an Elemente als auch an Dokumente geliefert werden können; dazu gehören derzeit nur copy, cut und paste-Aktionen.

HTML-Elementschnittstellen

Die Element-Schnittstelle wurde weiter angepasst, um speziell HTML-Elemente darzustellen, indem die HTMLElement-Schnittstelle eingeführt wurde, von der alle spezifischeren HTML-Elementklassen erben. Dies erweitert die Element-Klasse um HTML-spezifische allgemeine Funktionen für die Elementknoten. Eigenschaften, die von HTMLElement hinzugefügt wurden, sind zum Beispiel hidden und innerText.

Ein HTML-Dokument ist ein DOM-Baum, in dem jeder der Knoten ein HTML-Element ist, das durch die HTMLElement-Schnittstelle repräsentiert wird. Die HTMLElement-Klasse implementiert wiederum Node, so dass jedes Element auch ein Knoten ist (aber nicht umgekehrt). Auf diese Weise stehen die strukturellen Funktionen, die durch die Node-Schnittstelle implementiert werden, auch HTML-Elementen zur Verfügung, so dass sie ineinander verschachtelt, erstellt und gelöscht, verschoben und so weiter werden können.

Die HTMLElement-Schnittstelle ist jedoch generisch und bietet nur die Funktionalität, die allen HTML-Elementen gemeinsam ist, wie die ID des Elements, seine Koordinaten, das HTML, das das Element ausmacht, Informationen über die Scroll-Position und so weiter.

Um die Funktionalität der Kern-HTMLElement-Schnittstelle zu erweitern und die Funktionen bereitzustellen, die für ein bestimmtes Element benötigt werden, wird die HTMLElement-Klasse untergeordnet, um die benötigten Eigenschaften und Methoden hinzuzufügen. Zum Beispiel wird das <canvas>-Element durch ein Objekt vom Typ HTMLCanvasElement repräsentiert. HTMLCanvasElement erweitert den HTMLElement-Typ, indem es Eigenschaften wie height und Methoden wie getContext() hinzufügt, um Canvas-spezifische Funktionen bereitzustellen.

Die allgemeine Vererbung für HTML-Elementklassen sieht folgendermaßen aus:

Hierarchie der Schnittstellen für HTML-Elemente

Ein Element erbt somit die Eigenschaften und Methoden all seiner Vorfahren. Betrachten Sie beispielhaft ein <a>-Element, das im DOM durch ein Objekt vom Typ HTMLAnchorElement repräsentiert wird. Das Element umfasst dann die anker-spezifischen Eigenschaften und Methoden, die in der Dokumentation dieser Klasse beschrieben sind, aber auch die, die von HTMLElement und Element definiert werden, sowie von Node und schließlich EventTarget.

Jede Ebene definiert einen wesentlichen Aspekt der Nützlichkeit des Elements. Von Node erbt das Element Konzepte, die die Fähigkeit betreffen, dass das Element von einem anderen Element enthalten sein kann und selbst andere Elemente enthalten kann. Von besonderer Bedeutung ist, was durch das Erben von EventTarget gewonnen wird: die Fähigkeit, Ereignisse zu empfangen und zu behandeln, wie Mausklicks, Abspiel- und Pausenvorgänge usw.

Es gibt Elemente, die Gemeinsamkeiten teilen und daher einen zusätzlichen Zwischentyp haben. Zum Beispiel stellen die <audio>- und <video>-Elemente beide audiovisuelle Medien dar. Die entsprechenden Typen, HTMLAudioElement und HTMLVideoElement, basieren beide auf dem gemeinsamen Typ HTMLMediaElement, der wiederum auf HTMLElement usw. basiert. HTMLMediaElement definiert die Methoden und Eigenschaften, die zwischen Audio- und Videoelementen gemeinsam sind.

Diese element-spezifischen Schnittstellen bilden den Großteil der HTML DOM API und sind der Schwerpunkt dieses Artikels. Um mehr über die tatsächliche Struktur des DOM zu erfahren, siehe Einführung in das DOM.

Zielgruppe der HTML DOM

Die durch das HTML DOM freigelegten Funktionen gehören zu den am häufigsten verwendeten APIs im Werkzeugkasten eines Webentwicklers. Alle bis auf die einfachsten Webanwendungen werden einige Funktionen des HTML DOM verwenden.

Schnittstellen der HTML DOM API

Die meisten der Schnittstellen, die die HTML DOM API bilden, korrespondieren fast eins zu eins mit einzelnen HTML-Elementen oder einer kleinen Gruppe von Elementen mit ähnlicher Funktionalität. Darüber hinaus umfasst die HTML DOM API einige Schnittstellen und Typen, um die HTML-Elementschnittstellen zu unterstützen.

HTML-Elementschnittstellen

Diese Schnittstellen repräsentieren spezifische HTML-Elemente (oder Gruppen verwandter Elemente, die dieselben Eigenschaften und Methoden haben).

Veraltete HTML-Elementschnittstellen

Obsolete HTML-Elementschnittstellen

Web-App- und Browser-Integrationsschnittstellen

Diese Schnittstellen bieten Zugriff auf das Browserfenster und das Dokument, das das HTML enthält, sowie auf den Status des Browsers, verfügbare Plugins (falls vorhanden) und verschiedene Konfigurationsoptionen.

Veraltete Web-App- und Browser-Integrationsschnittstellen

Obsolete Web-App- und Browser-Integrationsschnittstellen

Formulardarstellungsschnittstellen

Diese Schnittstellen bieten Struktur und Funktionalität, die von den Elementen benötigt werden, um Formulare zu erstellen und zu verwalten, einschließlich der <form>- und <input>-Elemente.

Canvas- und Bildschnittstellen

Diese Schnittstellen repräsentieren Objekte, die von der Canvas-API sowie den <img>-Elementen und <picture>-Elementen verwendet werden.

Medienschnittstellen

Die Medienschnittstellen bieten HTML-Zugriff auf die Inhalte der Medienelemente: <audio> und <video>.

Drag-and-Drop-Schnittstellen

Diese Schnittstellen werden von der HTML Drag and Drop API verwendet, um einzelne ziehbare (oder gezogene) Elemente, Gruppen von gezogenen oder ziehbaren Elementen zu repräsentieren und um den Drag-and-Drop-Prozess zu handhaben.

Seitenhistorie-Schnittstellen

Die Schnittstellen der History API ermöglichen den Zugriff auf Informationen über den Verlauf des Browsers, sowie das Vor- und Zurückschalten der aktuellen Registerkarte des Browsers durch diesen Verlauf.

Web Components-Schnittstellen

Diese Schnittstellen werden von der Web Components API verwendet, um die verfügbaren benutzerdefinierten Elemente zu erstellen und zu verwalten.

Verschiedene und unterstützende Schnittstellen

Diese unterstützenden Objekttypen werden in einer Vielzahl von Funktionen in der HTML DOM API verwendet. Darüber hinaus repräsentiert PromiseRejectionEvent das Ereignis, das geliefert wird, wenn ein JavaScript-Promise abgelehnt wird.

Schnittstellen, die zu anderen APIs gehören

Einige Schnittstellen sind technisch in der HTML-Spezifikation definiert, gehören jedoch tatsächlich zu anderen APIs.

Web-Storage-Schnittstellen

Die Web Storage API bietet die Möglichkeit, dass Websites Daten entweder vorübergehend oder dauerhaft auf dem Gerät des Benutzers für die spätere Wiederverwendung speichern.

Web-Workers-Schnittstellen

Diese Schnittstellen werden von der Web Workers API sowohl zur Etablierung der Fähigkeit für Workers, mit einer App und ihrem Inhalt zu interagieren, als auch zur Unterstützung der Nachrichtenübermittlung zwischen Fenstern oder Apps verwendet.

WebSocket-Schnittstellen

Diese Schnittstellen, die durch die HTML-Spezifikation definiert sind, werden von der WebSockets API verwendet.

Server-sent events-Schnittstellen

Die EventSource-Schnittstelle repräsentiert die Quelle, die Server-sent events gesendet hat oder sendet.

Beispiele

In diesem Beispiel wird das input-Ereignis eines <input>-Elements überwacht, um den Status der "Senden"-Schaltfläche eines Formulars basierend darauf zu aktualisieren, ob ein bestimmtes Feld derzeit einen Wert hat oder nicht.

JavaScript

js
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");

sendButton.disabled = true;
// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
// nameField.focus();

nameField.addEventListener("input", (event) => {
  const elem = event.target;
  const valid = elem.value.length !== 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});

Dieser Code verwendet die getElementById()-Methode der Document-Schnittstelle, um das DOM-Objekt darzustellen, das die <input>-Elemente repräsentiert, deren IDs userName und sendButton sind. Mit diesen können wir auf die Eigenschaften und Methoden zugreifen, die Informationen über diese Elemente bereitstellen und Kontrolle über sie gewähren.

Das HTMLInputElement-Objekt für die "Senden"-Schaltfläche hat die Eigenschaft disabled, die auf true gesetzt ist, was die "Senden"-Schaltfläche deaktiviert, so dass sie nicht angeklickt werden kann. Darüber hinaus wird das Eingabefeld für den Benutzernamen durch Aufrufen der focus()-Methode, die es von HTMLElement erbt, in den aktiven Fokus gerückt.

Dann wird addEventListener() aufgerufen, um einen Handler für das input-Ereignis zur Benutzernameneingabe hinzuzufügen. Dieser Code prüft die Länge des aktuellen Wertes der Eingabe; wenn sie null ist, wird die "Senden"-Schaltfläche deaktiviert, falls sie nicht bereits deaktiviert ist. Andernfalls stellt der Code sicher, dass die Schaltfläche aktiviert ist.

Mit dieser Einrichtung wird die "Senden"-Schaltfläche immer dann aktiviert, wenn das Benutzernamenfeld einen Wert hat und deaktiviert, wenn es leer ist.

HTML

Das HTML für das Formular sieht folgendermaßen aus:

html
<p>Please provide the information below. Items marked with "*" are required.</p>
<form action="" method="get">
  <p>
    <label for="userName" required>Your name:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="userEmail">Email:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="Send" id="sendButton" />
</form>

Ergebnis

Spezifikationen

Specification
HTML
# htmlelement

Browser-Kompatibilität

Siehe auch

Referenzen

Leitfäden